﻿<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>慕课网</title>
  <style type="text/css">
   *{margin:0;padding:0;font-family:"Microsoft Yahei"}
   .wrap{margin:0 auto;width:1000px;}
   .top{height:75px;  margin-bottom:6px;}
   .logo{margin-left:20px;float:left;}
   .logo img{height:75px;}
   .nav ul li{float:left;list-style:none;}
   .nav ul li a{text-decoration:none;height:75px;line-height:75px;padding:0 20px;display:inline-block;color:black;font-size:18px;font-family:"微软雅黑";width:80px;text-align:center;}
    .nav ul li a:hover{background:#C00;color:white;}
	.ad{width:1000px;height:322px;overflow:hidden;}
	.ad img{height:322px;}
	.title{width:1000px;background:#3E3E3E;margin-top:10px;height:50px;}
	.title li{float:left; list-style:none; }
	.title li a{width:180px;height:50px;color:white;line-height:50px;text-align:center;display:block;text-decoration:none;}
	.title li a:hover{background:#BD3847;}
	.gd_pic{width:1000px;margin-top:5px;height:180px; }
	.left{float:left;width:320px;text-align:center;margin-right:20px;}
	.left img{width:320px;height:150px;display:block;margin-bottom:10px;}
	.mid{float:left;width:320px;text-align:center; }
	.mid img{width:320px;height:150px;display:block;margin-bottom:10px;}
	.right{float:right;width:320px;text-align:center;}
	.right img{width:320px;height:150px;display:block;margin-bottom:10px;}
	.left,.mid,.right{border:solid 1px #E7E7E7;}
	.left span,.mid span,.right span{font-size:15px;font-family:"微软雅黑";}
	.info{width:1000px;margin-top:25px;position:relative;}
	.imfo_left{width:320px;height:320px;border:1px solid #E7E7E7;float:left;}
   .info_left h2 a{text-decoration: none;color:white;}
	.info_left h2,.info_mid h2,.info_right h2{color:white;background:#BD3847;width:302px;height:40px;font-size:15px;line-height:40px; padding-left:20px;}
	.info_left li{height:100px;width:320px; list-style:none;border:1px solid #E7E7E7; }
	.info_left li .date{width:60px;height:70px;background:#BD3847;font-size:14px;color:white;text-align:center;margin-top:5px;float:left;}
    .info_left li .info_clearfix{width:260px;float:right;}
    .info_left li .info_clearfix h4{height:40px;line-height:40px;font-size:15px;padding-left:5px; }
	.info_left li .info_clearfix  a{text-decoration:none;color:#666;font-size:13px;}
	.info_mid{width:320px;height:344px;border:1px solid #E7E7E7;position:absolute;top:0px;left:340px;}
	.info_mid img{width:320px;height:200px;}
	.info_mid li{list-style:none;line-height:22px;line-height:22px;padding-left:20px;}
    .info_mid li a {text-decoration:none;color:black;font-family:"微软雅黑";}
	.info_right{width:320px;height:344px;border:1px solid #E7E7E7;position:absolute;top:0px;left:680px;}
	.info_right .contact-content{margin:5px 0 0 5px;line-height:25px;font-family:"微软雅黑";}
	.bottom{width:1002px;background:#E7E7E7;height:100px; position:relative;}
	.bottom p{position:absolute;top:60px;left:220px;font-weight:bold;}
  </style>
 </head>
 <body>
  <div class="wrap">
   <div class="top">
   <div class="logo">
   <a href="../index.html"><img src="../images/53edadad0001efe202000070.jpg"/></a>
   </div>
    <div class="nav">
	 <ul>
	 <li><a href="#">产品</a></li>
	 <li><a href="#">产品特色</a></li>
	 <li><a href="#">解决方案</a></li>
	 <li><a href="#">产品价格</a></li>
	 <li><a href="#">帮助中心</a></li>
     <li><a href="#">关于我们</a></li>
	 </ul>
	</div>
   </div>
   <div class="ad" id="picBox">
    <div class="pic">
	 <UL>
      <LI><IMG src="..\images\ad4.jpg"></LI>
      <LI><IMG src="..\images\ad2.jpg"></LI>
      <LI><IMG src="..\images\ad3.jpg"></LI>
    </UL>
	</div>
   </div>
   <div class="gd">
    <div class="title">
	 <ul>
	  <li><a href="javascript:void(0);">滚动新闻</a></li>
	  <li><a href="javascript:void(0);">这是滚动新闻</a></li>
	 </ul>
	</div><!--title结束-->
   </div>
   <div class="gd_pic">
    <div class="left">
	 <img src="..\images/53edad54000119fb03300130.jpg"/>
	 <span>玩转bootstrap</span>
	</div>
	<div class="mid">
	 <img src="..\images/53edad690001260a03300130.jpg"/>
	 <span>企业门户网站综合案例</span>
	</div>
	<div class="right">
	  <img src="..\images/53edad7a0001cde803300130.jpg"/>
	 <span>javascript基础</span>
	</div>
   </div>
   <div class="info">
    <div class="info_left">
	 <h2><a href="news.html">新闻中心</a>  </h2>
        <ul >
				<li class="clearfix">
					<div class="date"><br />8月<br />23日</div>
					<div class="info_clearfix">
						<h4>学习计划之"Android初养成"</h4>
						<p><a href="/">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p>
					</div>
				</li>
				<li class="clearfix">
					<div class="date"><br />8月<br />23日</div>
					<div class="info_clearfix">
						<h4>学习计划之"Android初养成"</h4>
						<p><a href="/">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p>
					</div>
				</li>
				<li class="clearfix">
					<div class="date"><br />8月<br />23日</div>
					<div class="info_clearfix">
						<h4>学习计划之"Android初养成"</h4>
						<p><a href="/">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p>
					</div>
				</li>
			</ul>
	</div>
	<div class="info_mid">
	 <h2>热门活动</h2>
	 <img src="../images/53edacdd0001b8e804820302.jpg"/>
	 <ul>
		<li><a href="javascript:void(0);">慕课网2048源码征集</a></li>
		<li><a href="javascript:void(0);">慕课网2048源码征集</a></li>
		<li><a href="javascript:void(0);">慕课网2048源码征集</a></li>
		<li><a href="javascript:void(0);">慕课网2048源码征集</a></li>
		 
	 </ul>
	</div>
	<div class="info_right">
	 <h2>联系我们</h2>
    <div class="contact-content">
			
			    <p>讲师招募<br>
                    JoV<br>
                    电话：10086<br>
                    QQ:360870202<br>
                    E-mail:gobananas@163.com<br><br><br>
                    网站合作<br>
                    JoV<br>
                    电话：10086<br>
                    QQ:360870202<br>
                    E-mail:gobananas@163.com
                </p>
				
			</div>
	</div>
   </div>
   <div class="bottom">
      <p>Copyright © 2013 imooc.com All Rights Reserved 京ICP备 13046642号-2</p>
   </div>
  </div><!--wrap结束-->
 </body>
</html>
